<template>
	<div class="main">
		<!-- 左侧信息面板 -->
		<div class="left-panel-list">
			<!-- 产品完成情况卡片 -->
			<Factory :navData="deviceList" :defaultActive="numID" containerHeight="80%" @item-click="handleItemClick">
			</Factory>
		</div>

		<!-- 中间3D/设备区 -->
		<div class="center-area">
			<!-- <div class="device-container"></div> -->
		</div>
		<!-- 右侧能源卡片区 -->
		<div class="left-panel">
			<!-- 产品完成情况卡片 -->
			<div class="fac-first-card">
				<div slot="header" class="panel-title">
					<i class="fa fa-bar-chart"></i>
					<span class="panel-title-span">设备接入实况</span>
				</div>
				<div class="stats-card-fac">
					<div class="status-header">
						<h3>单管下料线</h3>
					</div>
					<div class="status-indicators">
						<div class="status-item">
							<el-radio-group v-model="resource">
								<el-radio label="1">加工中</el-radio>
								<el-radio label="2">空闲中</el-radio>
							</el-radio-group>
						</div>
					</div>
				</div>
			</div>

			<!-- 合计卡片 -->
			<div class="source-messg">
				<div slot="header" class="panel-title">
					<i class="fa fa-calculator"></i>
					<span class="panel-title-span">近七日完成任务量</span>
				</div>
				<div style="padding: 2px; height: 18rem">
					<BarChart :chartData="chartData6" yAxisName="头"></BarChart>
				</div>
			</div>

			<!-- 设备接入实况卡片 -->
			<div>
				<div slot="header" class="panel-title">
					<i class="fa fa-plug"></i>
					<span class="panel-title-span">设备任务情况</span>
				</div>
				<div class="tabContent">
					<!-- 显示 -->
					<div v-if="isshow">
						<div style="margin-bottom: 5px">
							<span class="tab-tit">库位数</span>
							<span style="color: #ff8500; margin-left: 11px; font-size: 14px">{{ kuwei }}</span>
							<span class="tab-tit-sec">已入库</span>
							<span style="color: #2776db; margin-left: 11px; font-size: 14px">{{ zhanyong }}</span>
						</div>
						<!--  -->
						<div class="center_top">
							<el-table :data="storageData" border stripe size="small" class="tabl" height="tableHeight">
								<el-table-column align="center" prop="work_order_no" label="生产号令"
									width="80"></el-table-column>
								<el-table-column align="center" prop="drawing_no" label="元件图号"
									width="80"></el-table-column>
								<el-table-column align="center" prop="product_list_no" label="清单号"
									width="80"></el-table-column>
								<el-table-column align="center" prop="plan_qty" label="管段数量"
									width="80"></el-table-column>
								<el-table-column align="center" prop="completed_qty" label="元件库位"
									width="94"></el-table-column>
							</el-table>
						</div>
						<!--  -->
					</div>
					<!-- 显示 -->
					<!-- 显示 -->
					<div v-else>
						<div>
							<!-- <TableY></TableY> -->
							<div class="center_top">
								<el-table :data="storageData2" border stripe size="small" class="tabl"
									height="tableHeight">
									<el-table-column align="center" prop="work_order_no" label="生产号令"
										width="90"></el-table-column>
									<el-table-column align="center" prop="work_order_no" label="清单号"
										width="90"></el-table-column>
									<el-table-column align="center" prop="tube_length" label="长度"
										width="60"></el-table-column>
									<el-table-column align="center" prop="plan_qty" label="计划数量"
										width="80"></el-table-column>
									<el-table-column align="center" prop="completed_qty" label="完成数量"
										width="94"></el-table-column>
								</el-table>
							</div>
						</div>
					</div>
					<!-- 显示 -->
				</div>
			</div>
		</div>
	</div>
</template>
<!-- 引入 Element UI JS -->
<script>
	// 初始化Vue实例
	import LingChart from "@/components/LineChart/index.vue";
	import BarChart from "@/components/barEchart/index.vue";
	import RingChart from "@/components/Echart/index.vue";
	import ContentReal from "@/views/home/components/Realstatus";
	import Table from "@/views/ComprehensiveSituation/components/tabContent";
	import TableY from "@/views/ComprehensiveSituation/components/tabContentY";
	import Factory from "@/views/Factory/FactoryList";
	// tabContentY
	import {
		GetDeviceData,
		GetDeviceStatus
	} from "@/api/advert";
	import {
		WsRequest
	} from '@/api/ws';

	export default {
		components: {
			TableY,
			RingChart,
			ContentReal,
			Table,
			LingChart,
			BarChart,
			Factory,
		},
		data() {
			return {
				storageData2: [],
				storageData: [],
				id: "",
				isshow: true,
				kuwei: "",
				zhanyong: "",
				numID: 0,
				resource: "1",
				opstion: {},
				chartData: [],
				chartData6: [
					// { date: "1月", completed_qty: 100 },/*  */
					// { xAxis: "2月", seriesData: 300 },
					// { xAxis: "3月", seriesData: 500 },
					// { xAxis: "4月", seriesData: 700 },
					// { xAxis: "5月", seriesData: 800 },
					// { xAxis: "6月", seriesData: 200 },
					// { xAxis: "7月", seriesData: 250 },
					// { xAxis: "8月", seriesData: 280 },
				],
				deviceList: [{
						id: "PL1",
						mainText: "二跨",
						subText: "长管线联动"
					},
					{
						id: "PL2",
						mainText: "二跨",
						subText: "短管线联动"
					},
					{
						id: "PL3",
						mainText: "二跨",
						subText: "单线管"
					},
					{
						id: "WH1",
						mainText: "二跨",
						subText: "焊前库"
					},
					{
						id: "WM1",
						mainText: "二跨",
						subText: "一号焊机"
					},
					{
						id: "WM2",
						mainText: "二跨",
						subText: "二号焊机"
					},
					{
						id: "WM3",
						mainText: "二跨",
						subText: "三号焊机"
					},
					{
						id: "TV1",
						mainText: "二跨",
						subText: "工业电视"
					},
					{
						id: "WH2",
						mainText: "二跨",
						subText: "中间库(长直管库)"
					},
					// 数据
					{
						id: "BP1",
						mainText: "二跨",
						subText: "系统弯"
					},
					{
						id: "WM4",
						mainText: "三跨",
						subText: "四号电机"
					},
					{
						id: "WM5",
						mainText: "三跨",
						subText: "五号电机"
					},
					{
						id: "TV2",
						mainText: "三跨",
						subText: "工业电视"
					},
					{
						id: "OT1",
						mainText: "三跨",
						subText: "⼿氩"
					},
					{
						id: "OT2",
						mainText: "四跨",
						subText: "装配区域"
					},
					{
						id: "OT3",
						mainText: "四跨",
						subText: "热处理"
					},
					{
						id: "OT4",
						mainText: "四跨",
						subText: "四跨⽔压"
					},
					{
						id: "OT2",
						mainText: "四跨",
						subText: "缝隙炉"
					},
				],
			};
		},
		mounted() {
			// var myChart3 = echarts.init(document.getElementById("stats-item"));

			// this.GetDeviceStatus();
		},
		methods: {
			getAll(item) {
				let params = {
					source: "数字孪生",
					trantime: "20230202080000", //接口传输时间
					message: {
						device_id: item.id, //设备ID
					},
				};
				GetDeviceData(params).then((res) => {
					console.log(params, 222222222222222222222222222222222)
					console.log(res, 111111111111111111111111)
					// this.kuwei = res.data.storageusageinfo.storage_qty;
					// this.zhanyong = res.data.storageusageinfo.occupation_qty;
					this.chartData6 = res.data.sevendaycompletionstatus;
					this.storageData = res.data.executingtaskinfo;
					this.storageData2 = res.data.executingtaskinfo;
					// this.resource = res.data.devicestatus.device_status;
				});
			},
			// GetDeviceStatus() {
			//   let params = {
			//     source: "数字孪生",
			//     trantime: "20230202080000", //接口传输时间
			//     message: {
			//       device_id: "", //设备ID 为空时，查询所有设备状态信息
			//     },
			//   };
			//   // GetDeviceStatus(params).then((res) => {
			//   //   this.deviceList = res.data.devicestatus;
			//   // });
			// },
			handleItemClick(item) {
				WsRequest ({
					"api_name": "Butten_Event",
					"Butten_ID": item.id
				});

			// localStorage.setItem("tilenum",item.id)
			if (item.id === 'OT2' || item.id === 'WH1' || item.id === 'WH2' || item.id === 'TV2') {
				this.isshow = true;
			} else {
				this.isshow = false;
				this.getAll(item);
				this.id = item.id
			}
		},
	},
	};
</script>
<style lang="less" scoped>
	// @import "./css/home.css";
	.chart-container {
		// background: red;
		// display: flex;
		// width: 7rem;
		// height: 7rem;
		// margin-bottom: 1rem;
		// border: 1px solid #ebeef5;
		// border-radius: 8px;
		// padding: 20px;
		box-sizing: border-box;
	}

	.left-panel .el-card {
		// background: red;
		height: 33%;
	}

	.left-panel .el-card:last-child {
		// background: red;
		height: 45%;
	}

	.tabContent {
		.tab-tit {
			font-size: 16px;
			color: #fff;
			margin: 5px 2px;
		}

		.tab-tit-sec {
			// margin-top: 5px;
			// margin-left: 5%;
			margin: 5px 2px 5px 5%;
			font-size: 16px;
			color: #fff;
		}
	}

	.source-messg {
		margin: 20px 0;
	}

	// .stats-item {
	// }
	// .left-panel .el-card:first-child {
	//   // height: 10%;
	// }
	.left-panel {
		width: 434px;
		height: 997px;
	}

	.left-panel-list {
		margin-top: 100px;
		margin-left: 55px;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 260px;
		height: 841px;
		opacity: 0.8;
	}

	.status-header {
		margin-top: 1rem;
		margin-left: 1rem;
	}

	.status-header h3 {
		font-size: 18px;
		margin: 0;
		color: #fff;
	}

	.status-indicators {
		display: flex;
		// gap: 20px;
	}

	.status-item {
		display: flex;
		align-items: center;
		font-size: 16px;
		margin: 1rem;
		// gap: 1rem;
	}

	.status-dot {
		display: inline-block;
		width: 12px;
		height: 12px;
		border-radius: 50%;
	}

	.processing {
		background-color: #2ecc71;
	}

	.idle {
		background-color: #95a5a6;
	}

	::v-deep .el-radio {

		/* 覆盖选中时文字的高亮颜色 */
		&.is-checked .el-radio__label {
			color: #fff !important;
			/* 保持文字颜色不变 */
		}

		.el-radio__label {
			color: #fff;
		}

		/* 自定义选中状态下的单选框样式 */
		&.is-checked .el-radio__inner {
			border-color: rgb(17 223 63);
			background: rgb(17 223 63);
		}

		/* 移除选中时的文字加粗效果 */
		.el-radio__label {
			font-weight: normal !important;
		}
	}

	.center_top {
		width: 100%;
		height: 399px;
		overflow: hidden;

		.tabl {
			background: transparent !important;
			margin: 1% 0;
			position: relative;
			width: 100%;
			height: 100%; //高度加到这里
			overflow-y: hidden;
			overflow-x: hidden;

			::v-deep .el-table__body-wrapper::-webkit-scrollbar {
				width: 0;
			}
		}
	}

	::v-deep .el-table__body {
		//-webkit-border-horizontal-spacing: 13px;  // 水平间距
		-webkit-border-vertical-spacing: 2px; // 垂直间距
	}

	.user_skills ::v-deep .el-table--fit {
		padding: 5px;
	}

	.user_skills ::v-deep .el-table,
	.el-table__expanded-cell {
		background-color: transparent;
	}

	::v-deep .el-table tr {
		color: #fff !important;
		background-color: transparent !important;
	}

	::v-deep .el-table--enable-row-transition .el-table__body td,
	.el-table .cell {
		// background-color: rgb(13, 35, 34) !important;
		background-color: transparent !important;
		color: #fff;
	}

	::v-deep .el-table::before {
		//去除底部白线
		left: 0;
		bottom: 0;
		width: 100%;
		height: 0px;
	}

	.el-table--border::after {
		width: 0;
	}

	::v-deep .el-table td.el-table__cell div {
		line-height: 20px !important;
		// border-right: 3px solid;
	}

	::v-deep .el-table th.is-leaf {
		border-right: none;
		border-bottom: none;
	}

	::v-deep .el-table th.el-table__cell>.cell {
		// border-right: 3px solid;
	}

	::v-deep .el-table__header .el-table__cell {
		cursor: default !important;
		pointer-events: none !important;
		background-color: rgb(27, 68, 69) !important;
		/* 表头背景色 */
		color: #1baea4 !important;
		/* 表头文字颜色 */
		font-weight: bold !important;
		/* 表头文字加粗 */
	}
</style>